/**
 * Created by huotaol on 2017/5/11.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, ListView, StyleSheet, TouchableOpacity, View} from "react-native";
import CustomStyle from "../../../common/style/CustomStyle";
import ModuleCommonHeader from "../../main/module/ModuleCommonHeader";


const DATA_SOURCE = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class CarGalleryAll extends Component {
    static propTypes = {
        carInfo: PropTypes.object,
        picList: PropTypes.array,
        select: PropTypes.func,
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this._renderItem = this._renderItem.bind(this);
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <ModuleCommonHeader title='全部图片'/>
                <ListView
                    contentContainerStyle={styles.contentViewStyle}
                    dataSource={DATA_SOURCE.cloneWithRows(this.props.picList)}
                    renderRow={this._renderItem}/>
            </View>
        );
    }

    _renderItem(data, sectionID, rowID,) {
        return <TouchableOpacity
            onPress={() => {
                if (this.props.select) {
                    this.props.select(rowID);
                }
            }}
            style={[styles.itemStyle]}>
            <Image source={{uri: data}}
                   resizeMode={'contain'}
                   style={[styles.itemImageStyle]}/>
        </TouchableOpacity>
    }
}

const styles = StyleSheet.create({

    contentViewStyle: {
        // 主轴方向
        flexDirection: 'row',
        // 换行
        flexWrap: 'wrap'
    },
    itemStyle: {
        // 对齐方式
        alignItems: 'center',
        justifyContent: 'center',
        // 尺寸
        width: CustomStyle.screenWidth / 3,
        height: CustomStyle.getActualSizeInVertical(180),
    },

    itemImageStyle: {
        // 尺寸
        width: CustomStyle.getActualSizeInHorizontal(210),
        height: CustomStyle.getActualSizeInVertical(140),
    }
});